<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <style>
      .delete {
        text-decoration: none;
        color: black;
      }
      .delete:hover {
        text-decoration: none;
        color: red;
      }
      .edit {
        text-decoration: none;
        color: red;
      }
      .edit:hover {
        text-decoration: none;
        color: black;
      }
    </style>
  </head>
  <body>
    产品管理：<input type="text" name="brandName" id="brandName" /><input
      type="button"
      id="btnQuery"
      name="btnQuery"
      value="查询"
    />
    <table id="tb-data" border="1" cellspacing="2" cellpadding="2" width="500">
      <thead align="center">
        <tr>
          <th>编号</th>
          <th>名称</th>
          <th>价格</th>
          <th>产地</th>
          <th>操作</th>
        </tr>
      </thead>
      <tbody align="center" id="tbody-data"></tbody>
    </table>
    编号：<input type="text" id="txtId" name="txtId" /><br />
    名称：<input type="text" id="txtName" name="txtName" /><br />
    价格：<input type="text" id="txtPrice" name="txtPrice" /><br />
    产地：<input type="text" id="txtPo" name="txtPo" /><br />
    <input type="button" id="btnSave" name="btnSave" value="保存" />
    <script>
      let app = {
        data: new Set([
          {
            id: 101,
            name: '华为Mate手机',
            price: 4599,
            PlaceofOrigin: '深圳',
            del: '删除',
            edi: '修改',
          },
          {
            id: 102,
            name: '小米跑步机',
            price: 2299,
            PlaceofOrigin: '北京',
            del: '删除',
            edi: '修改',
          },
          {
            id: 103,
            name: '九阳智能面条机',
            price: 1099,
            PlaceofOrigin: '上海',
            del: '删除',
            edi: '修改',
          },
          {
            id: 104,
            name: '凯迪仕指纹锁',
            price: 1999,
            PlaceofOrigin: '广州',
            del: '删除',
            edi: '修改',
          },
          {
            id: 105,
            name: '海尔变频空调',
            price: 4599,
            PlaceofOrigin: '青岛',
            del: '删除',
            edi: '修改',
          },
        ]),
        current: null,
        init() {},
        query() {},
        delete() {},
        findById(id) {},
        edit() {},
        save() {},
      }

      //信息显示
      const tbody = document.querySelector('#tb-data tbody')
      function info(mydata) {
        tbody.innerHTML = ''
        for (let item of mydata) {
          let tr = document.createElement('tr')
          tr.innerHTML = `<td>${item.id}</td><td>${item.name}</td><td>${item.price}</td><td>${item.PlaceofOrigin}</td><td><input type="button" class="delete" value="${item.del}" onclick="delHandle(this)"><input type="button" class="edit" value="${item.edi}" onclick="edi()"></td>`
          tbody.appendChild(tr)
        }
      }
      info(app.data)

      //查询
      const btnName = document.querySelector('#btnQuery')
      const txtName = document.querySelector('#brandName')
      btnName.addEventListener('click', function () {
        app.data.some(function (item) {
          if (item.name === txtName.value) {
            let Data = []
            Data.push(item)
            info(Data)
            return true
          }
        })
      })
      //删除
      function delHandle(txt) {
        let del = document.querySelector('#tbody-data')
        let wz = txt.parentNode.parentNode
        del.removeChild(wz)
      }
      //修改
      function edi() {
        let btnEdit = document.querySelector('.edit')
        btnEdit.addEventListener('click', function () {
          const id = document.querySelector('#txtId')
          const name = document.querySelector('#txtName')
          const price = document.querySelector('#txtPrice')
          const po = document.querySelector('#txtPo')
        })
      }
      //根据Id查询

      //保存
      function save() {
        const sa = document.querySelector('#btnSave')
        sa.addEventListener('click', function () {})
      }
    </script>
  </body>
</html>
